<template>
	<view class="bigbox">
		<view class="head">
			<view class="head-top">
				<view class="del">
					<view class="text1">
						我的资产
					</view>
					<view class="text2">
						{{someNum}}
					</view>
				</view>
				<view class="del">
					<view class="text4">
						<uni-data-select v-model="changeType" :localdata="range" @change="change"
							:clear="false"></uni-data-select>
					</view>
				</view>
			</view>
			<view class="cont" v-if="iconShow=='down'?true:false">
				<view class="cont-num1">
					<view class="num1">
						￥{{sum_price}}
					</view>
					<view class="num2">
						总资产
					</view>
				</view>
				<view class="cont-line"></view>
				<view class="cont-num1">
					<view class="num1">
						￥{{rijun}}
					</view>
					<view class="num2">
						总日均
					</view>
				</view>
			</view>
		</view>

		<view class="forCont">

			<view v-if="List.length!= 0">
				<view class="scroll-view-item" @click="gotoDetail(item)" v-for="(item,index) in List" :key="index">
					<view class="leftTop" :style="{background: item.bkclor}">
						{{item.rijun}} 元/天
					</view>
					<view class="title">
						{{item.name}}
					</view>

					<l-circularProgress :boxWidth="50" :boxHeight="50" :lineWidth="4"
						:fontColor="item.status == 1 ? '#637BE9':item.status == 2 ? '#888888':'#FA9A5A'"
						:progressColor="item.status == 1 ? '#637BE9': item.status == 2?'#888888':'#FA9A5A'"
						:gradualColor="item.status == 1 ? '#637BE9': item.status == 2?'#888888':'#FA9A5A'"
						:percent="item.baifenbi">
					</l-circularProgress>
					<!-- <hbxw-circular-progress value="40"/> -->

					<view class="type">
						{{item.status== 1? '退役需': item.status==2 ?'已退役' :'超服役'}}
					</view>

					<view class="time">
						<view class="time1" :style="{
							background: item.status == 1? '#91A1EF': item.status == 2?'#C0C0C0':'#FA9A5A'	
						}">
							{{item.tuiyi}}
						</view>
						<view class="time2" :style="{
							background: item.status == 1? '#637BE9': item.status == 2?'#888888':'#FA6400'	
						}">
							天
						</view>
					</view>
				</view>

				<uni-load-more :status="loadStatus" @clickLoadMore="clickLoadMore"
					:content-text="contentText"></uni-load-more>
			</view>

			<view v-else class="noList">
				<view class="scroll-view-item">
					<view class="leftTop">
						10.0元/天
					</view>
					<view class="title">
						演示产品
					</view>

					<l-circularProgress :boxWidth="50" :boxHeight="50" :lineWidth="4" fontColor="#EB0999"
						gradualColor="#f57900" :percent="43">
					</l-circularProgress>

					<view class="type">
						退役需
					</view>

					<view class="time">
						<view class="time1">
							576
						</view>
						<view class="time2">
							天
						</view>
					</view>
				</view>

				<view class="foot">
					以上为示例,请 <text @click="gotoAdd" class="addStyle">添加</text> 您的第一个物品
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				changeType: 0,
				sum_price: 0,
				rijun: 0,
				value: null,
				range: [{
						value: 0,
						text: "全部"
					},
					{
						value: 1,
						text: "服役中"
					},
					{
						value: 2,
						text: "已退役"
					},
				],
				iconShow: 'down',
				iconFlag: false,
				scrollTop: 0,
				List: [
					// 1服役中 2已退役 3超服役
					// {
					// 	id: 1,
					// 	name: "Apple Watch",
					// 	target_price: "4.88",
					// 	buy_date: 1640880000,
					// 	serve_day: 1068,
					// 	use_date: 1730304000,
					// 	status: 1,
					// 	buy_price: "5199.00",
					// 	rijun: "4.88",
					// 	tuiyi: 1068,
					// 	baifenbi: 100,
					// 	level: 2
					// }, 
				],
				someNum: 0,

				pageNum: 1,
				pageSize: 10,
				total: 0,
				loadStatus: "more",
				contentText: {
					contentdown: "下拉加载更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				},
				rijunBck: '',
			};
		},
		onShow() {
			if (uni.getStorageSync('user_token')) {
				this.pageNum = 1
				this.getHomeList()
				this.getUserMoney()
				//滚动回到顶部
				uni.pageScrollTo({
					scrollTop: 0,
				});
			}
		},
		// 已滚动的距离
		onPageScroll(e) {
			// console.log("滚动距离为：" + e.scrollTop);
		},
		// 下拉刷新
		// onPullDownRefresh() {
		// 	console.log('onPullDownRefresh........');
		// 	// this.lastPage = this.currentPage
		// 	// this.currentPage = 1
		// 	// setTimeout(() => {
		// 	// 	uni.stopPullDownRefresh()
		// 	// }, 600);
		// },
		onReachBottom() {
			// console.log('noMoreData1111111');
			// this.loadMoreData()
			this.loadStatus = 'loading'
			this.loadMoreData()
		},
		methods: {
			determineRange(number) {
				let color = ''
				if (number > 14.6) {
					return color = '#9556F3'
				} else if (number > 10.8 && number < 14.6) {
					return color = '#FAC800'
				} else if (number > 7.2 && number < 10.8) {
					return color = '#299FE9'
				} else if (number > 3 && number < 7.2) {
					return color = '#66CB01'
				} else if (number > 0 && number < 3) {
					return color = '#CCCCCC'
				}
			},
			gotoDetail(item) {
				console.log(item);
				uni.navigateTo({
					url: '/pages/tabBar/details/details?id=' + encodeURIComponent(JSON.stringify(item.id))
				});
			},
			gotoAdd() {
				uni.switchTab({
					url: '/pages/tabBar/add/add'
				});
			},
			change(e) {
				console.log("e:", e);
				this.pageNum = 1
				this.List = []
				this.changeType = e
				if (e == 0) {
					this.changeType = ''
				}
				this.getHomeList()
				this.getUserMoney()
			},
			// 点击加载更多
			clickLoadMore(e) {
				// uni.showToast({
				// 	icon: 'none',
				// 	title: "当前状态：" + e.detail.status
				// })
				this.loadStatus = 'loading'
				this.loadMoreData()
			},
			// 加载更多数据
			loadMoreData() {
				this.pageNum += 1;
				this.$api.homeList({
					type: this.changeType,
					page: this.pageNum,
					limit: this.pageSize
				}).then(res => {
					if (res.result.list.length > 0) {
						res.result.list.map(item => {
							return item.bkclor = this.determineRange(item.rijun)
						})
						this.List = this.List.concat(res.result.list);
						this.loadStatus = 'more';
					} else {
						this.loadStatus = 'noMore';
					}
				});
			},
			getHomeList(item) {
				this.$api.homeList({
					type: this.changeType,
					page: this.pageNum,
					limit: this.pageSize,
				}).then(res => { //调用封装的api
					if (res.code == 1 && res.result.list.length > 0) {
						res.result.list.map(item => {
							return item.bkclor = this.determineRange(item.rijun)
						})
						this.List = res.result.list
					} else {
						this.List = []
					}
				})
			},
			getUserMoney() {
				this.$api.homeApi({
					type: this.changeType
				}).then(res => { //调用封装的api
					if (res.code == 1) {
						this.sum_price = res.result.sum_price
						this.rijun = res.result.rijun
						this.someNum = res.result.num
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.no-more-data {
		width: 100%;
		height: 50rpx;
		color: #000;
		align-items: center;
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		text-align: center;
	}

	::v-deep .uni-select {
		border: 0;
		width: 65px;
	}

	::v-deep .uni-icons::before {
		color: #FFFFFF;
	}

	::v-deep .uni-select__input-text {
		color: #FFFFFF;
	}

	::v-deep .uni-section {
		background-color: #637BE9;
	}

	.bigbox {
		height: 100%;
		background: #F8F9F9;
		padding-top: 20px;

		.head {
			// height: 127px;
			margin: 0 20px 20px 20px;
			background-color: #637BE9;
			border-radius: 14px 14px 14px 14px;
			// padding: 20px 20px 0 20px;

			&-top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-bottom: 15px;
				padding: 20px 18px 15px 18px;

				.del {
					display: flex;
					align-items: center;
				}

				.text1 {
					width: 80px;
					font-family: Roboto, Roboto;
					font-weight: 500;
					font-size: 19px;
					color: #FFFFFF;
					line-height: 23px;
				}

				.text2 {
					font-family: Roboto, Roboto;
					font-weight: 500;
					font-size: 14px;
					color: #FFFFFF;
					line-height: 16px;
					margin-left: 10px;
				}



				.text3 {
					font-family: Roboto, Roboto;
					font-weight: 500;
					font-size: 14px;
					color: #FFFFFF;
					line-height: 16px;
					// margin-left: 50%;
				}

				.text4 {
					margin-left: 10px;
				}
			}
		}

		.cont {
			display: flex;
			// margin-top: 20px;
			padding-bottom: 20px;

			&-line {
				height: 30px;
				width: 0px;
				border-right: 1px solid #FFFFFF;
			}

			&-num1:last-child {
				border-right: 0;
			}

			&-num1 {
				width: 50%;
				display: flex;
				flex-direction: column;
				align-items: center;
				// border-right: 1px solid #FFFFFF;

				.num1 {
					font-family: Roboto, Roboto;
					font-weight: 700;
					font-size: 23px;
					color: #FFFFFF;
					line-height: 17px;
					margin: 10px 0;
				}

				.num2 {
					font-family: Roboto, Roboto;
					font-weight: 400;
					font-size: 11px;
					color: #FFFFFF;
					line-height: 13px;
				}
			}
		}

		.forCont {
			margin-top: 30px;
			padding: 0 20px;

			.scroll-Y {
				height: 40%;
			}
		}

		.scroll-view-item {
			// width: 100%;
			height: 62px;
			background: #FFFFFF;
			border-radius: 14px 14px 14px 14px;
			display: flex;
			align-items: center;
			margin-bottom: 15px;
			position: relative;

			.leftTop {
				width: 77px;
				text-align: center;
				// background: #FAC800;
				border-radius: 14px 0px 14px 0px;
				position: absolute;
				top: 0%;
				left: 0%;
				font-family: Roboto, Roboto;
				font-weight: 500;
				font-size: 10px;
				color: #FFFFFF;
				line-height: 19px;
			}

			.title {
				width: 140px;
				font-weight: 500;
				font-size: 14px;
				color: #232323;
				margin-left: 10px;
			}

			.type {
				width: 80px;
				font-weight: 500;
				font-size: 14px;
				color: #5E5E5E;
				// margin: 0 14px;
				text-align: center;
			}

			.time {
				height: 43px;
				line-height: 43px;
				color: #FFFFFF;
				display: flex;

				.time1 {
					width: 66px;
					border-radius: 14px 0px 0px 14px;
					font-weight: 300;
					font-size: 23px;
					background: #91A1EF;
					text-align: center;
				}

				.time2 {
					width: 33px;
					border-radius: 0px 14px 14px 0px;
					font-weight: 300;
					font-size: 14px;
					background: #637BE9;
					text-align: center;
				}
			}
		}

		.foot {
			font-family: Roboto, Roboto;
			font-weight: 400;
			font-size: 15px;
			color: #C0C0C0;
			line-height: 17px;
			text-align: center;

			.addStyle {
				color: #637BE9;
				margin: 0 3px;
			}
		}
	}
</style>